<template>
  <div class="drugList pd-20">
    <el-input v-model="searchParams.drugName"
              placeholder="请输入药品名称"
              class="w-200"
              @clear="handleQuery"
              clearable />
    <el-select v-model="searchParams.drugType"
               filterable
               clearable
               class="w-200"
               placeholder="请选择药品类型"
               @change="handleQuery">
      <el-option :value="item.drugType"
                 v-for="item in drugTypeList"
                 :label="item.value"
                 :key="item.drugType"></el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <el-button type="primary"
               @click="handleAdd">新 增</el-button>
    <Table stripe
           border
           :columns="columns"
           :data="dataList"
           v-loading="loading"
           class="mt-20">
      <template slot-scope="{ row }"
                slot="action">
        <span @click="drugOp(row, 'up')"
              v-if="row.isDelete === 1">上架</span>
        <span @click="drugOp(row, 'down')"
              v-if="row.isDelete === 0">下架</span>
      </template>
    </Table>
    <Page :current.sync="currentPage"
          :total="totals"
          ref="page"
          :page-size="pageSize"
          @on-change="initTableData"
          show-total />
    <Modal v-model="editDrugPage"
           title="编辑药品目录"
           footer-hide>
      <div style="padding-left: 100px; padding-right: 100px">
        <Row>
          <Col span="24">
          <Form :model="drugDetail"
                label-position="left"
                :label-width="100"
                ref="formValidate"
                :rules="ruleValidate">
            <FormItem label="药品类型:"
                      prop="drugType">
              <RadioGroup v-model="drugDetail.drugType">
                <Radio label="1">中药</Radio>
                <Radio label="2">西药</Radio>
                <Radio label="3">中成药</Radio>
                <Radio label="4">保健品</Radio>
                <Radio label="5">器械</Radio>
                <Radio label="6">其他</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="药品名称:"
                      prop="drugName">
              <Input required
                     v-model="drugDetail.drugName"
                     placeholder="请填写药品名称"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem label="药品规格:"
                      prop="standard">
              <Input required
                     v-model="drugDetail.standard"
                     placeholder="请填写药品规格"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem label="药品单位:"
                      prop="unit">
              <Input v-model="drugDetail.unit"
                     placeholder="请填写药品单位"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem label="药品包装:"
                      prop="drugPackage">
              <Input required
                     v-model="drugDetail.drugPackage"
                     placeholder="请填写药品包装"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem label="产地/厂家:"
                      prop="drugFactoryName">
              <Input required
                     v-model="drugDetail.drugFactoryName"
                     placeholder="请填写产地/厂家"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem label="价格:"
                      prop="price">
              <Input required
                     v-model="drugDetail.price"
                     placeholder="请填写价格"
                     class="input_1"
                     clearable />
            </FormItem>
            <FormItem>
              <Button type="primary"
                      @click="saveData">保存</Button>
              <Button style="margin-left: 8px"
                      @click="cancelBtn">取消</Button>
            </FormItem>
          </Form>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "drugList",
    data () {
      return {
        loading: false,
        currentPage: 1,
        totals: 0,
        pageSize: 20,
        editDrugPage: false,
        dataList: [],
        searchParams: {
          drugName: '', // 药品名称
          drugType: '', // 药品类型
        },
        drugTypeList: [
          { drugType: 1, value: '中药' },
          { drugType: 2, value: '西药' },
          { drugType: 3, value: '中成药' },
          { drugType: 4, value: '保健品' },
          { drugType: 5, value: '器械' }
        ],
        columns: [
          {
            title: "药品类型",
            key: "drugType",
            render: (h, params) => {
              switch (params.row.drugType) {
                case 1:
                  return h("div", [h("span", {}, "中药")]);
                case 2:
                  return h("div", [h("span", {}, "西药")]);
                case 3:
                  return h("div", [h("span", {}, "中成药")]);
                case 4:
                  return h("div", [h("span", {}, "保健品")]);
                case 5:
                  return h("div", [h("span", {}, "器械")]);
                default:
                  return h("div", [h("span", {}, "其他")]);
              }
            }
          },
          {
            title: "名称",
            key: "drugName"
          },
          {
            title: "规格",
            key: "standard"
          },
          {
            title: "包装",
            key: "drugPackage"
          },
          {
            title: "生产厂家/产地",
            key: "drugFactoryName"
          },
          {
            title: "状态",
            key: "isDelete",
            render: (h, params) => {
              switch (params.row.isDelete) {
                case 1:
                  return h("div", [h("span", {}, "下架")]);
                case 0:
                  return h("div", [h("span", {}, "上架")]);
              }
            }
          },
          {
            title: "价格",
            key: "price"
          },
          {
            title: "操作",
            slot: "action",
            align: "center"
          }
        ],
        drugDetail: {
          drugType: '',
          drugName: '',
          standard: '',
          unit: '',
          drugPackage: '',
          drugFactoryName: '',
          price: ''
        },
        ruleValidate: {
          drugType: [
            { required: true, message: '请选择药品类型', trigger: 'change' }
          ],
          drugName: [
            { required: true, message: '请填写药品名称', trigger: 'blur' }
          ],
          standard: [
            { required: true, message: '请填写药品规格', trigger: 'blur' },
          ],
          drugPackage: [
            { required: true, message: '请填写药品包装', trigger: 'blur' }
          ],
          drugFactoryName: [
            { required: true, message: '请填写产地/厂家', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请填写价格', trigger: 'blur' }
          ]
        }
      };
    },
    mounted () {
      this.initTableData();
    },
    methods: {
      initTableData () {
        let pageIndex = this.currentPage - 1;
        if (this.drugName && this.drugName.trim() !== '') {
          pageIndex = 0;
        }
        let param = {
          drugName: this.searchParams.drugName,
          drugType: this.searchParams.drugType,
          pageSize: this.pageSize,
          pageIndex: pageIndex
        };
        this.loading = true;
        this.post(this.api.drug.getDrugInfoPageApp, param).then(res => {
          let resData = res.data.object;
          if (res.data.code === '200') {
            this.loading = false;
            this.dataList = res.data.object;
            if (resData.length > 0) {
              this.dataList = res.data.object;
            }
            if (Object.keys(resData).length === 0) {
              this.dataList = [];
            }
            this.totals = res.data.totalNum;
          }
        });
      },
      // 药品类型
      handSelect (val) {
        this.currentPage = 1;
        this.searchParams.drugType = val;
        this.initTableData();
      },
      handleQuery () {
        this.currentPage = 1;
        this.initTableData();
      },
      cancelBtn () {
        this.editDrugPage = false;
        this.$refs['formValidate'].resetFields()
      },
      handleAdd () {
        this.editDrugPage = true
        this.$refs['formValidate'].resetFields()
      },
      // 上下架
      async drugOp (row, op) {
        let params = {
          drugId: row.drugId,
          isDelete: 0
        }
        switch (op) {
          case 'up': // 上架
            params.isDelete = 0
            break
          case 'down': // 下架
            params.isDelete = 1
        }
        const { data: res } = await this.post(this.api.drug.drugUpAndDown, params);
        if (res.code === '200') {
          this.$message.success('操作成功!');
          this.initTableData();
        }
      },
      saveData () {
        this.$refs['formValidate'].validate((valid) => {
          if (valid) {
            this.post(this.api.drug.addDrugInfo, this.drugDetail).then(res => {
              if (res.data.code === '200') {
                this.editDrugPage = false;
                this.$message.success("保存成功");
                this.initTableData();
              }
            });
          }
        })
      }
    }
  };
</script>
